<template>
  <router-view></router-view>
  <van-action-bar class="w100p flex jc-sa" border>
    <van-action-bar-icon
      :class="store.activeIndex === 0 ? 'base' : ''"
      :color="store.activeIndex === 0 ? '#c03d37' : ''"
      icon="home-o"
      text="首页"
      @click="onnclick(0)"
    />
    <van-action-bar-icon
      :class="store.activeIndex === 1 ? 'base' : ''"
      :color="store.activeIndex === 1 ? '#c03d37' : ''"
      icon="records-o"
      text="笔记"
      @click="onnclick(1)"
    />
    <van-action-bar-icon
      :class="store.activeIndex === 2 ? 'base' : ''"
      :color="store.activeIndex === 2 ? '#c03d37' : ''"
      icon="contact-o"
      text="我的"
      @click="onnclick(2)"
    />
  </van-action-bar>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "./pinia";

const store = useStore();
const router = useRouter();

let activeIndex = ref(0);
const onnclick = (index) => {
  store.$patch(state=> {
    state.activeIndex = index;
  })
  let urls = ["/home", "/biji", "/my"];
  router.push(urls[index]);
};
</script>
<style>
#app .base {
  color: #c03d37;
}
.van-action-bar {
  border-top: 1px solid #d1d5da;
}
</style>
